<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>typescript | 个人笔记</title>
    <meta name="description" content="个人笔记">
    <link rel="stylesheet" href="/vite-vue-blog/assets/style.8f176e54.css">
    <link rel="modulepreload" href="/vite-vue-blog/assets/app.864f9b59.js">
    <link rel="modulepreload" href="/vite-vue-blog/assets/notes_1.javaScript_typescript_1.介绍与安装.md.bd6528cc.lean.js">
    <link rel="prefetch" href="/vite-vue-blog/assets/chunks/VPAlgoliaSearchBox.1d33ff4e.js">
    <link rel="icon" href="/vite-vue-blog/logo.svg">
  <link rel="preload" href="/assets/inter-latin.7b37fe23.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <script>(()=>{const e=localStorage.getItem("vue-theme-appearance");(!e||e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="VPApp" data-v-73d720b3><!--[--><span tabindex="-1" data-v-9a0c1eda></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-9a0c1eda> Skip to content </a><!--]--><!----><!--[--><!--]--><header class="VPNav nav-bar" data-v-73d720b3 data-v-665b4326><div class="VPNavBar" data-v-665b4326 data-v-22c1e5cc><div class="container" data-v-22c1e5cc><a class="VPNavBarTitle" href="/vite-vue-blog/" data-v-22c1e5cc data-v-734a10ac><h1 class="text" data-v-734a10ac>个人笔记</h1></a><div class="content" data-v-22c1e5cc><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-22c1e5cc data-v-03d04f32><span id="main-nav-aria-label" class="visually-hidden" data-v-03d04f32>Main Navigation</span><!--[--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">javaScript <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/typescript/1.%E4%BB%8B%E7%BB%8D%E4%B8%8E%E5%AE%89%E8%A3%85.html"><!--[-->typescript<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/1.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html"><!--[-->基础<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/10.%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0.html"><!--[-->工具函数<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">basic <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/1.html/1.%E5%9F%BA%E7%A1%80.html"><!--[-->html<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/2.css/1.%E5%9F%BA%E7%A1%80.html"><!--[-->css<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/5.node/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->node<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/6.http/2.http.html"><!--[-->http<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/7.git/github.html"><!--[-->git<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/8.java/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->java<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/9.%E7%AE%97%E6%B3%95/1.%E5%9F%BA%E7%A1%80.html"><!--[-->算法<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">framework <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/10.react/1.%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA%E4%B8%8E%E9%85%8D%E7%BD%AE.html"><!--[-->react<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/3.express/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->express<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/3.vue/12.vitepress.html"><!--[-->vue<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/4.uniapp/1.%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.html"><!--[-->uniapp<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/5.electron/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->electron<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/6.%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.html"><!--[-->微信小程序<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/7.%E4%B9%BE%E5%9D%A4/1.%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86.html"><!--[-->乾坤<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/koa/redis.html"><!--[-->koa<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">library <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/Autoprefixer/1.%E5%9F%BA%E7%A1%80.html"><!--[-->Autoprefixer<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/eharts/1.vue%E4%B8%AD%E4%BD%BF%E7%94%A8.html"><!--[-->eharts<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/logic-flow/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->logic-flow<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/Monaco-Editor/Monaco-Editor.html"><!--[-->Monaco-Editor<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/node%E5%8C%85/cheerio.html"><!--[-->node包<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/xlsx/1.%E6%96%87%E6%A1%A3%E7%BF%BB%E8%AF%91.html"><!--[-->xlsx<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/%E5%BE%85%E6%95%B4%E7%90%86/axios.html"><!--[-->待整理<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">build <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/1.webpack/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->webpack<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/2.rollup/1.%E4%BB%8B%E7%BB%8D.html"><!--[-->rollup<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/3.babel/3.babel.html"><!--[-->babel<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/4.server/4.%E4%B8%8A%E7%BA%BF.html"><!--[-->server<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">all <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/3.just-start/2.mongodb.html"><!--[-->just-start<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/4.solve-problems/postmon.html"><!--[-->solve-problems<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/4.vscode/1.vscode%E4%BD%BF%E7%94%A8.html"><!--[-->vscode<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/English/%E5%AD%A6%E4%B9%A0%E5%AD%A6%E4%B9%A0.html"><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/Snabbdom/1.%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB.html"><!--[-->Snabbdom<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPNavBarAppearance appearance" data-v-22c1e5cc data-v-4a42e18e><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-4a42e18e><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="vt-social-links VPNavBarSocialLinks social-links" data-v-22c1e5cc data-v-16262ec2><!--[--><a class="vt-social-link is-small" href="https://github.com/zqy233/vite-vue-blog" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><!--]--></div><div class="vt-flyout VPNavBarExtra extra" data-v-22c1e5cc data-v-0e7e8326><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-icon"><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="vt-flyout-menu"><div class="vt-menu"><!----><!--[--><!--[--><div class="vt-menu-group" data-v-0e7e8326><div class="vt-menu-item item" data-v-0e7e8326><p class="vt-menu-label" data-v-0e7e8326>明暗</p><div class="vt-menu-action action" data-v-0e7e8326><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-0e7e8326><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="vt-menu-group" data-v-0e7e8326><div class="vt-menu-item item" data-v-0e7e8326><div class="vt-social-links social-links" data-v-0e7e8326><!--[--><a class="vt-social-link is-small" href="https://github.com/zqy233/vite-vue-blog" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="vt-hamburger VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-22c1e5cc data-v-60965b98><span class="vt-hamburger-container"><span class="vt-hamburger-top"></span><span class="vt-hamburger-middle"></span><span class="vt-hamburger-bottom"></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-73d720b3 data-v-acbefcb0><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-acbefcb0><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-acbefcb0><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-acbefcb0>目录</span></button><a class="top-link" href="#" data-v-acbefcb0>回到顶部</a></div><aside class="VPSidebar" data-v-73d720b3 data-v-137f95ea><nav id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-137f95ea><!--[--><!--]--><span id="sidebar-aria-label" class="visually-hidden" data-v-137f95ea>Sidebar Navigation </span><!--[--><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="active title-text" data-v-0ce3abb6>typescript</h2></div><!--[--><a class="link active" href="/vite-vue-blog/notes/1.javaScript/typescript/1.%E4%BB%8B%E7%BB%8D%E4%B8%8E%E5%AE%89%E8%A3%85.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>介绍与安装</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/2.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础语法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/3.%E8%BF%9B%E9%98%B6%E8%AF%AD%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>进阶语法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/4.%E7%BB%BC%E5%90%88%E7%A4%BA%E4%BE%8B.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>综合示例</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/6.type-challenges.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>type-challenges</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/7.doc%E6%B3%A8%E9%87%8A%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>doc注释法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/8.tsconfig.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>tsconfig</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>基础</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/1.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础语法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/2.String.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>String</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/3.Number.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Number</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/4.Object.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Object</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/5.Array.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Array</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/6.canvas.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>canvas</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/10.call-apply-bind.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>call-apply-bind</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/12.Date.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Date</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/14.%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>正则表达式</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/15.Promise.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Promise</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/20.ajax.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>ajax</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/ES6.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>ES6</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/setTimeout.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>setTimeout</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>事件委托</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>事件循环</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>原型与原型链</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E5%8E%9F%E5%9E%8B%E9%93%BE%E6%8E%A2%E7%A9%B6.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>原型链探究</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%88%86%E7%89%87.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>大文件上传分片</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E6%87%92%E5%8A%A0%E8%BD%BD%E5%92%8C%E8%99%9A%E6%8B%9F%E6%BB%9A%E5%8A%A8.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>懒加载和虚拟滚动</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E6%96%87%E4%BB%B6%E4%BA%8C%E8%BF%9B%E5%88%B6.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>文件二进制</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>深浅拷贝</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E9%97%AD%E5%8C%85.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>闭包</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>防抖与节流</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>工具函数</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/10.%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>工具函数</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/16.%E6%BB%9A%E5%8A%A8.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>滚动</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/svg.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>svg</p></a><!--]--></section></div><!--]--><!--[--><!--]--></nav></aside><div id="VPContent" class="VPContent has-sidebar" data-v-73d720b3 data-v-f1570ab6><div class="VPContentDoc has-aside has-sidebar" data-v-f1570ab6 data-v-6971fa12><div class="container" data-v-6971fa12><div class="aside" data-v-6971fa12><div class="aside-container" data-v-6971fa12><!--[--><!--]--><div class="VPContentDocOutline" data-v-6971fa12 data-v-6706ac52><div class="outline-marker" data-v-6706ac52></div><div class="outline-title" data-v-6706ac52>索引</div><nav aria-labelledby="doc-outline-aria-label" data-v-6706ac52><span id="doc-outline-aria-label" class="visually-hidden" data-v-6706ac52>Table of Contents for current page</span><ul class="root" data-v-6706ac52><!--[--><li style="" data-v-6706ac52><a class="outline-link" href="#体会typescript" data-v-6706ac52>体会typescript</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#安装" data-v-6706ac52>安装</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#编译运行" data-v-6706ac52>编译运行</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#简化运行" data-v-6706ac52>简化运行</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#使用webpack" data-v-6706ac52>使用webpack</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#设置tsconfig-json" data-v-6706ac52>设置tsconfig.json</a><!----></li><!--]--></ul></nav></div><!--[--><!--]--><!----><!--[--><!--]--></div></div><div class="content" data-v-6971fa12><!--[--><!--]--><main data-v-6971fa12><div style="position:relative;" class="vt-doc notes" data-v-6971fa12><div><h1 id="typescript" tabindex="-1">typescript <a class="header-anchor" href="#typescript" aria-hidden="true">#</a></h1><blockquote><p><code>TypeScript</code>是<code>JavaScript</code>的一个超集，支持 ECMAScript 6 标准，是由微软开发的自由和开源的编程语言，设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上</p></blockquote><h3 id="为什么需要typescript" tabindex="-1">为什么需要typescript <a class="header-anchor" href="#为什么需要typescript" aria-hidden="true">#</a></h3><ul><li>能在开发过程中就发现一些潜在问题</li><li>为编辑器(如VSCode)提供更友好的代码提示</li><li>代码更清晰(当你熟悉使用typescript后)</li></ul><h2 id="体会typescript" tabindex="-1">体会typescript <a class="header-anchor" href="#体会typescript" aria-hidden="true">#</a></h2><p>新建文件夹，创建 a.ts 和 b.ts 两个文件</p><p>a.ts中代码如下</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Color</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Big</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">33</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">44</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">55</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">a</span><span style="color:#676E95;font-style:italic;"> 二选一: red,blue</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">b</span><span style="color:#676E95;font-style:italic;"> 三选一: 33,99,66</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">c</span><span style="color:#676E95;font-style:italic;"> 任意字符串</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> getData </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Color</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Big</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> c</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">c</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>b.ts中,输入<code>import g</code>，这时vscode就自动提示了<code>getData</code>函数的路径</p><p>并且当敲写getData函数时，会提供参数类型提示与类型校验</p><p>这样就最简单的体会到 typescript 开发的强大之处了</p><blockquote><p>敲写getData函数时，会出现中文提示，这由doc注释语法提供的，其搭配<code>typescript</code>效果非常的好</p><p>想要使用doc注释语法，只要在vscode中代码上方输入<code>/**</code>就会弹出相应代码补全提示</p></blockquote><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装</span></span>
<span class="line"><span style="color:#A6ACCD;">npm i -g typescript</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 查看ts版本命令,显示版本号说明安装成功</span></span>
<span class="line"><span style="color:#A6ACCD;">tsc -v</span></span>
<span class="line"></span></code></pre></div><h2 id="编译运行" tabindex="-1">编译运行 <a class="header-anchor" href="#编译运行" aria-hidden="true">#</a></h2><p>新建一个文件夹TypeScript，新建一个文件app.ts，其中代码如下：</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello,world</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div><p><code>TypeScript</code>代码一般是不能直接运行的，需要把代码进行编译成<code>JavaScript</code>代码以后才能运行，使用如下命令来进行编译</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;"># 编译app.ts文件，会在app.ts同级目录生成一个app.js文件</span></span>
<span class="line"><span style="color:#A6ACCD;">tsc app.ts</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 生成一个app.d.ts扩展名的文件</span></span>
<span class="line"><span style="color:#A6ACCD;">tsc app.ts --declaration</span></span>
<span class="line"></span></code></pre></div><p>目录结构</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">-- TypeScript</span></span>
<span class="line"><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">   </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">-- app.js</span></span>
<span class="line"><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">   </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">-- app.ts</span></span>
<span class="line"><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">   </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">-- app.d.ts</span></span>
<span class="line"></span></code></pre></div><p>tsc 常用编译参数如下表所示：</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">--help  显示帮助信息</span></span>
<span class="line"><span style="color:#A6ACCD;">--module 载入扩展模块</span></span>
<span class="line"><span style="color:#A6ACCD;">--target 设置ECMA版本</span></span>
<span class="line"><span style="color:#A6ACCD;">--declaration 生成.d.ts文件</span></span>
<span class="line"><span style="color:#A6ACCD;">--removeComments 删除文件的注释</span></span>
<span class="line"><span style="color:#A6ACCD;">--out 编译多个文件并合并到一个输出的文件</span></span>
<span class="line"></span></code></pre></div><p>运行app.js</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">node app.js</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 输出</span></span>
<span class="line"><span style="color:#A6ACCD;">Hello,world</span></span>
<span class="line"></span></code></pre></div><h2 id="简化运行" tabindex="-1">简化运行 <a class="header-anchor" href="#简化运行" aria-hidden="true">#</a></h2><p>如果要运行一个<code>.ts</code>文件，首先需要使用<code>tsc</code>命令去编译它为<code>js</code>文件，随后再使用<code>node</code>命令去执行它</p><p>那么有没有一种工具能够一步完成以上事情呢？可以全局安装<code>ts-node</code>工具</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;"># 安装ts-node</span></span>
<span class="line"><span style="color:#A6ACCD;">npm i ts-node -g</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装完毕，查看版本号，出现版本号说明安装成功</span></span>
<span class="line"><span style="color:#A6ACCD;">ts-node -v</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 直接运行ts文件</span></span>
<span class="line"><span style="color:#A6ACCD;">ts-node demo.ts</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"># 输出</span></span>
<span class="line"><span style="color:#A6ACCD;">Hello,world</span></span>
<span class="line"></span></code></pre></div><h2 id="使用webpack" tabindex="-1">使用webpack <a class="header-anchor" href="#使用webpack" aria-hidden="true">#</a></h2><p>使用打包工具来搭建开发ts的环境</p><h3 id="配置webpack" tabindex="-1">配置webpack <a class="header-anchor" href="#配置webpack" aria-hidden="true">#</a></h3><p>下载webpack</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm i -D webpack webpack-cli </span></span>
<span class="line"></span></code></pre></div><p>下载webpack插件</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm i -D html-webpack-plugin clean-webpack-plugin webpack-dev-server</span></span>
<span class="line"></span></code></pre></div><p>下载ts-loader</p><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm i -D ts-loader</span></span>
<span class="line"></span></code></pre></div><p>新建src文件夹，在其下新建index.ts,代码如下</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello,world</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div><p>新建<code>webpack.config.js</code></p><div class="language-js"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> path </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 用于打包完生成一个html文件，并自动引入入口js</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> HTMLWebpackPlugin </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">html-webpack-plugin</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 因为webpack默认打包后是替换原来的同名文件，如果dist中存在一些之前生成的文件，而之后不会再生成的文件，这些文件理论上会一直存在，这种情况下需要去手动确认和删除，显然是很繁琐的，CleanWebpackPlugin插件的作用就是打包前清空dist文件</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> CleanWebpackPlugin </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">clean-webpack-plugin</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">entry</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./src/index.ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">output</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> path</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#A6ACCD;">(__dirname</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">dist</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">filename</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">bundle.js</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">module</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">rules</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\.</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">use</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts-loader</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">exclude</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">node_modules</span><span style="color:#89DDFF;">/</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    ]</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">CleanWebpackPlugin</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">HTMLWebpackPlugin</span><span style="color:#A6ACCD;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">resolve</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">extensions</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>设置package.json</p><div class="language-json"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">build</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">webpack</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">dev</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">webpack serve --open </span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="设置tsconfig-json" tabindex="-1">设置tsconfig.json <a class="header-anchor" href="#设置tsconfig-json" aria-hidden="true">#</a></h2><div class="language-json"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">compilerOptions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">module</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ESNext</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">target</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ESNext</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">sourceMap</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:false</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">exclude</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">node_modules</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="运行" tabindex="-1">运行 <a class="header-anchor" href="#运行" aria-hidden="true">#</a></h3><div class="language-sh"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">yarn dev</span></span>
<span class="line"></span></code></pre></div><p>webpack会读取webpack.config.js中配置，之后webpack启动一个热更新的服务器，通过监听入口的ts文件以及他所有的引用ts文件的代码变化，这样就实现了一个更高效的开发环境</p></div></div><!----></main><!--[--><!--]--><footer class="VPContentDocFooter" data-v-6971fa12 data-v-716919ab><!----><a class="next-link" href="/vite-vue-blog/notes/1.javaScript/typescript/2.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html" data-v-716919ab><span class="desc" data-v-716919ab>下一节 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-link-icon" data-v-716919ab><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></span><span class="title" data-v-716919ab>基础语法</span></a></footer></div></div></div></div><div class="visually-hidden" aria-live="polite" data-v-73d720b3>typescript has loaded</div></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"a7119076\",\"notes_1.javascript_typescript_1.介绍与安装.md\":\"bd6528cc\",\"notes_1.javascript_typescript_2.基础语法.md\":\"2b48285d\",\"notes_1.javascript_typescript_3.进阶语法.md\":\"9fc200ea\",\"notes_1.javascript_typescript_4.综合示例.md\":\"b2cca1bb\",\"notes_1.javascript_typescript_6.type-challenges.md\":\"ad1ea441\",\"notes_1.javascript_typescript_7.doc注释法.md\":\"6da3a8f5\",\"notes_1.javascript_typescript_8.tsconfig.md\":\"3a9cad49\",\"notes_1.javascript_基础_1.基础语法.md\":\"53042640\",\"notes_1.javascript_基础_10.call-apply-bind.md\":\"8b5b4d53\",\"notes_1.javascript_基础_12.date.md\":\"8bbc9e82\",\"notes_1.javascript_基础_14.正则表达式.md\":\"dad2455a\",\"notes_1.javascript_基础_15.promise.md\":\"523683bd\",\"notes_1.javascript_基础_2.string.md\":\"9ef7d4a4\",\"notes_1.javascript_基础_20.ajax.md\":\"3c505745\",\"notes_1.javascript_基础_3.number.md\":\"673ae25b\",\"notes_1.javascript_基础_4.object.md\":\"c3c2d806\",\"notes_1.javascript_基础_5.array.md\":\"8341e3ea\",\"notes_1.javascript_基础_6.canvas.md\":\"5b3d57a6\",\"notes_1.javascript_基础_es6.md\":\"a11b1af7\",\"notes_1.javascript_基础_settimeout.md\":\"3a278b83\",\"notes_1.javascript_基础_事件委托.md\":\"fa7b0a71\",\"notes_1.javascript_基础_事件循环.md\":\"043fd67b\",\"notes_1.javascript_基础_原型与原型链.md\":\"85f423d2\",\"notes_1.javascript_基础_原型链探究.md\":\"7ab3569c\",\"notes_1.javascript_基础_大文件上传分片.md\":\"e732af31\",\"notes_1.javascript_基础_懒加载和虚拟滚动.md\":\"6ff4061a\",\"notes_1.javascript_基础_文件二进制.md\":\"0b60ff5e\",\"notes_1.javascript_基础_深浅拷贝.md\":\"1d99a497\",\"notes_1.javascript_基础_闭包.md\":\"4d9e0010\",\"notes_1.javascript_基础_防抖与节流.md\":\"ac94b2d6\",\"notes_1.javascript_工具函数_10.工具函数.md\":\"8ff9a8d5\",\"notes_1.javascript_工具函数_16.滚动.md\":\"3343e4be\",\"notes_1.javascript_工具函数_svg.md\":\"8296350c\",\"notes_2.basic_1.html_1.基础.md\":\"dcdaee52\",\"notes_2.basic_2.css_1.基础.md\":\"7ace2c5c\",\"notes_2.basic_2.css_2.flex.md\":\"c69977d3\",\"notes_2.basic_2.css_3.less.md\":\"a501b0d7\",\"notes_2.basic_2.css_4.scss.md\":\"7f9633f1\",\"notes_2.basic_2.css_5.响应式.md\":\"036701f5\",\"notes_2.basic_2.css_6.主题切换.md\":\"0c4e4dd0\",\"notes_2.basic_2.css_7.动画.md\":\"fd4bc61e\",\"notes_2.basic_2.css_8.grid.md\":\"bdc8b7ae\",\"notes_2.basic_5.node_1.起步.md\":\"e7e277ef\",\"notes_2.basic_5.node_4.环境变量设置.md\":\"a03a948a\",\"notes_2.basic_5.node_npm.md\":\"211fbec4\",\"notes_2.basic_5.node_nvm.md\":\"e3486de6\",\"notes_2.basic_5.node_package.json.md\":\"d9e9c604\",\"notes_2.basic_5.node_pnpm.md\":\"bc13810e\",\"notes_2.basic_5.node_yarn.md\":\"56fb8e96\",\"notes_2.basic_5.node_脚本开发.md\":\"b2f2b588\",\"notes_2.basic_6.http_2.http.md\":\"07ef7cc3\",\"notes_2.basic_6.http_untitled.md\":\"0bf853ff\",\"notes_2.basic_7.git_github.md\":\"4a8e9177\",\"notes_2.basic_7.git_vim编辑器.md\":\"7feb6977\",\"notes_2.basic_7.git_分支操作.md\":\"eca5274c\",\"notes_2.basic_7.git_基础.md\":\"13f2197d\",\"notes_2.basic_7.git_子模块.md\":\"4d22ac99\",\"notes_2.basic_7.git_拉取代码.md\":\"1ddaa4e1\",\"notes_2.basic_7.git_提交代码.md\":\"60f0513e\",\"notes_2.basic_7.git_问题整理.md\":\"5ee1ccd8\",\"notes_2.basic_8.java_1.起步.md\":\"cd36d569\",\"notes_2.basic_8.java_3.基础语法.md\":\"b06281a7\",\"notes_2.basic_8.java_4.javaweb.md\":\"ae639163\",\"notes_2.basic_8.java_5.mysql.md\":\"c0605455\",\"notes_2.basic_8.java_6.服务器.md\":\"1fdae0b4\",\"notes_2.basic_9.算法_1.基础.md\":\"fa3f4620\",\"notes_2.basic_9.算法_5.leecode.md\":\"5836668f\",\"notes_3.framework_10.react_1.项目创建与配置.md\":\"a13b8d18\",\"notes_3.framework_10.react_2.语法.md\":\"945be494\",\"notes_3.framework_10.react_3.react-router.md\":\"89475651\",\"notes_3.framework_10.react_4.hooks.md\":\"93d27fd6\",\"notes_3.framework_3.express_1.起步.md\":\"582569a2\",\"notes_3.framework_3.express_2.express方法.md\":\"297b2f45\",\"notes_3.framework_3.express_3.jwt.md\":\"e5f91a6a\",\"notes_3.framework_3.express_4.mysql.md\":\"4f576728\",\"notes_3.framework_3.vue_12.vitepress.md\":\"03a09f4d\",\"notes_3.framework_3.vue_13.vue-router.md\":\"64d860a1\",\"notes_3.framework_3.vue_14.vuetify.md\":\"b8c63df7\",\"notes_3.framework_3.vue_15.源码阅读.md\":\"3b7203db\",\"notes_3.framework_3.vue_16.vite插件开发.md\":\"592c82ee\",\"notes_3.framework_3.vue_18.vueuse.md\":\"7292fe8e\",\"notes_3.framework_3.vue_2.vite.md\":\"66d9c036\",\"notes_3.framework_3.vue_3.基础.md\":\"189184b0\",\"notes_3.framework_3.vue_4.vue2.md\":\"6bd4d84f\",\"notes_3.framework_3.vue_5.vue3.md\":\"da43c351\",\"notes_3.framework_3.vue_6.pinna.md\":\"431f4d88\",\"notes_3.framework_3.vue_7.待整理笔记.md\":\"b5cb4a1d\",\"notes_3.framework_3.vue_8.功能实现.md\":\"deed1460\",\"notes_3.framework_4.uniapp_1.创建项目.md\":\"76affd27\",\"notes_3.framework_4.uniapp_3.实例.md\":\"c5d614e0\",\"notes_3.framework_4.uniapp_4.unicloud.md\":\"2a35fe9c\",\"notes_3.framework_4.uniapp_6.sqlite.md\":\"36191099\",\"notes_3.framework_4.uniapp_hbuilderx插件.md\":\"4bec2ec3\",\"notes_3.framework_4.uniapp_app端文件操作.md\":\"95db967d\",\"notes_3.framework_4.uniapp_nvue.md\":\"625f242d\",\"notes_3.framework_4.uniapp_功能实现.md\":\"0d913121\",\"notes_3.framework_4.uniapp_图片操作.md\":\"1d8b7462\",\"notes_3.framework_4.uniapp_基础知识.md\":\"70124264\",\"notes_3.framework_4.uniapp_小程序.md\":\"0d38f31a\",\"notes_3.framework_4.uniapp_文件操作.md\":\"e86ee38f\",\"notes_3.framework_4.uniapp_滚动.md\":\"97780f32\",\"notes_3.framework_5.electron_1.起步.md\":\"1fa8d3e9\",\"notes_3.framework_5.electron_2.vite-electron.md\":\"30b0f6fe\",\"notes_3.framework_5.electron_2.开始.md\":\"f25811cd\",\"notes_3.framework_5.electron_4.语法.md\":\"cd7644d7\",\"notes_3.framework_5.electron_5.electron打包vue.md\":\"07404ad8\",\"notes_3.framework_5.electron_6.进程通信.md\":\"172975e9\",\"notes_3.framework_5.electron_7.黑夜模式.md\":\"0acdd76f\",\"notes_3.framework_5.electron_8.browserwindow.md\":\"79092934\",\"notes_3.framework_6.微信小程序_1.创建项目.md\":\"43e386d1\",\"notes_3.framework_7.乾坤_1.前置知识.md\":\"87448ab1\",\"notes_3.framework_7.乾坤_2.实战.md\":\"ba1ae36b\",\"notes_3.framework_7.乾坤_3.部署上线.md\":\"3b3e834c\",\"notes_3.framework_7.乾坤_4.源码阅读.md\":\"c21a2e17\",\"notes_3.framework_koa_redis.md\":\"bba89871\",\"notes_3.framework_koa_中间件.md\":\"2ca1c619\",\"notes_3.framework_koa_基础.md\":\"374c2d17\",\"notes_4.library_autoprefixer_1.基础.md\":\"a15e218d\",\"notes_4.library_monaco-editor_monaco-editor.md\":\"57b75b84\",\"notes_4.library_eharts_1.vue中使用.md\":\"cdde4646\",\"notes_4.library_eharts_2.react中使用.md\":\"2579c725\",\"notes_4.library_eharts_3.通用.md\":\"cb7119c9\",\"notes_4.library_eharts_4.饼图.md\":\"4e8e47e2\",\"notes_4.library_eharts_5.柱状图.md\":\"70d08ba6\",\"notes_4.library_eharts_6.折线图.md\":\"ae2e9342\",\"notes_4.library_eharts_7.tooltip.md\":\"114afe2d\",\"notes_4.library_eharts_8.地图.md\":\"8696e214\",\"notes_4.library_logic-flow_1.起步.md\":\"f29527ec\",\"notes_4.library_logic-flow_3.用法.md\":\"d74d70e6\",\"notes_4.library_node包_cheerio.md\":\"c589ee05\",\"notes_4.library_node包_docsify.md\":\"784484ef\",\"notes_4.library_node包_npm-check.md\":\"1ce5454f\",\"notes_4.library_node包_npm-run-all.md\":\"91276b49\",\"notes_4.library_node包_tsup.md\":\"9cf1bf37\",\"notes_4.library_node包_脚本.md\":\"b58b5982\",\"notes_4.library_xlsx_1.文档翻译.md\":\"12943aa2\",\"notes_4.library_xlsx_2.学习xlsx.md\":\"e5e24bbb\",\"notes_4.library_待整理_axios.md\":\"5a7641af\",\"notes_4.library_待整理_dayjs.md\":\"7e7716a5\",\"notes_4.library_待整理_prettier.md\":\"d7bd12d2\",\"notes_4.library_待整理_vxe-table.md\":\"ed1fef55\",\"notes_5.build_1.webpack_1.起步.md\":\"8dd80bd5\",\"notes_5.build_1.webpack_2.loader.md\":\"ec110bce\",\"notes_5.build_1.webpack_3.vue脚手架.md\":\"ffb3d85e\",\"notes_5.build_1.webpack_4.进阶.md\":\"05b3507c\",\"notes_5.build_2.rollup_1.介绍.md\":\"70b92034\",\"notes_5.build_2.rollup_1.起步.md\":\"2c4acac4\",\"notes_5.build_2.rollup_4.打包格式.md\":\"cce455ff\",\"notes_5.build_2.rollup_5.常用插件.md\":\"d9ca29f7\",\"notes_5.build_2.rollup_6.插件开发.md\":\"a8a79b98\",\"notes_5.build_3.babel_3.babel.md\":\"c919cbf8\",\"notes_5.build_4.server_4.上线.md\":\"d50d068a\",\"notes_6.all_3.just-start_2.mongodb.md\":\"a068a2e5\",\"notes_6.all_3.just-start_3.移动端.md\":\"fd479c00\",\"notes_6.all_3.just-start_5.脚本.md\":\"b0c9f691\",\"notes_6.all_4.solve-problems_postmon.md\":\"844774bd\",\"notes_6.all_4.solve-problems_ps.md\":\"bdc89237\",\"notes_6.all_4.solve-problems_typora.md\":\"b10b94a2\",\"notes_6.all_4.solve-problems_uniapp.md\":\"4fd2f730\",\"notes_6.all_4.solve-problems_windows10.md\":\"b2413012\",\"notes_6.all_4.solve-problems_开发.md\":\"104171f2\",\"notes_6.all_4.solve-problems_浏览器.md\":\"af324a8b\",\"notes_6.all_4.solve-problems_论文查重.md\":\"c3cec84e\",\"notes_6.all_4.vscode_1.vscode使用.md\":\"ac6e101a\",\"notes_6.all_4.vscode_1.插件开发流程.md\":\"c7250214\",\"notes_6.all_4.vscode_1.概括.md\":\"1d9fd058\",\"notes_6.all_4.vscode_2.commands.md\":\"17839438\",\"notes_6.all_4.vscode_2.languages.md\":\"ad36adc9\",\"notes_6.all_4.vscode_2.vscode常用插件.md\":\"f856d76a\",\"notes_6.all_4.vscode_2.语法高亮指南.md\":\"022760aa\",\"notes_6.all_4.vscode_4.插件api.md\":\"d2bc7b97\",\"notes_6.all_4.vscode_5.插件开发实例.md\":\"56b1b964\",\"notes_6.all_4.vscode_6.package.json.md\":\"bd15bba9\",\"notes_6.all_english_学习学习.md\":\"8487d588\",\"notes_6.all_snabbdom_1.源码解读.md\":\"86622f05\"}")</script>
    <script type="module" async src="/vite-vue-blog/assets/app.864f9b59.js"></script>
    
  </body>
</html>